// 封装一个图片懒加载的工具型方法
import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";
export function lazyLoad(api) {
  const list = ref([]);
  // target是需要监听的dom，本来是外部传入的，但是这里用响应式数据进行了优化
  //  响应式数据，需要暴露出去，在外界获取dom
  const target = ref(null);
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        //isIntersecting参数表示是否进入可视区域
        stop(); // 停止监听
        api().then((res) => {
          list.value = res.result; // 发请求把图片数据给list
        });
      }
    },
    {
      threshold: 0, // 可视化占比
    }
  );
  return { list, target };
}
